<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>列表</title>
    <!-- JqueryUI -->
    <link rel="stylesheet" type="text/css" href="${path}/css/jquery-ui.css">
    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="${path}/css/bootstrap.min.css">
    <!-- Awesome font icons -->
    <link rel="stylesheet" type="text/css" href="${path}/css/font-awesome.min.css" media="screen">
    <!-- Owlcoursel -->
    <link rel="stylesheet" type="text/css" href="${path}/css/owl-coursel/owl.carousel.css">
    <link rel="stylesheet" type="text/css" href="${path}/css/owl-coursel/owl.transitions.css">
    <!-- Magnific-popup -->
    <link rel="stylesheet" type="text/css" href="${path}/css/magnific-popup/magnific-popup.css">
    <!-- Style -->
    <link rel="stylesheet" type="text/css" href="${path}/css/style.css" media="screen">
    <!-- Fw -->
    <link rel="stylesheet" type="text/css" href="${path}/css/fw.css" media="screen">
    <style type="text/css">
        #select111{
            margin-top: 220px;

        }
        .hr{
            margin: 10px;
        }
        .sx_child{
            padding: 3px 5px;
            margin-right: 5px;
        }
        .sx_span{
            color: gray;
        }
        .sx_selected{
            color: white;
            background-color: #96B97D;
            border-radius: 2px;
        }
    </style>
</head>
<body class="bg-m">



<div class="preloader">
    <i class="fa fa-spinner"></i>
</div>
<!--引入导航begin-->
<%@ include file="common/header.jsp"%>
<!--引入导航end-->
<input type="hidden" value="${rec}" id="hrec">
<input type="hidden" value="${cat}" id="hcat">
<input type="hidden" value="${order}" id="horder">
<input type="hidden" value="${loc}" id="hloc">

<div class="container" id="select111">
    <div class="sx" id="rec">
        <span class="sx_span">类别：</span>
        <a class="sx_child sx_selected" name="aaa" href="javascript:changerec(-1)">全部</a>
        <a class="sx_child" name="aaa" href="javascript:changerec('推荐产品')">推荐产品</a>
        <a class="sx_child" name="aaa" href="javascript:changerec('新品上市')">新品上市</a>
        <a class="sx_child" name="aaa" href="javascript:changerec('热卖产品')">热卖产品</a>
    </div>
    <hr class="hr"/>
    <div class="sx" id="cat">
  <%--      <c:if test="${empty cat}"><input type="hidden" value="-1" id="hcat"></c:if>
        <c:if test="${!empty cat}"><input type="hidden" value="${cat}" id="hcat"></c:if>--%>
        <span class="sx_span">种类：</span>
        <a class="sx_child sx_selected" name="aaa" href="javascript:changecat(-1)">全部</a>
        <c:forEach items="${categories}" var="cat">
            <a class="sx_child" name="aaa" href="javascript:changecat(${cat.categoryId})">${cat.categoryName}</a>
        </c:forEach>
    </div>
    <hr class="hr"/>
    <div class="sx" id="order">
        <span class="sx_span">价格：</span>
        <a class="sx_child sx_selected" name="aaa" href="javascript:changeorder(false)">从低到高</a>
        <a class="sx_child" name="aaa" href="javascript:changeorder(true)">从高到低</a>
    </div>
    <hr class="hr"/>
    <div class="sx" id="loc">
        <span class="sx_span">产地：</span>
        <a rel="1" class="sx_child sx_selected" name="aaa" href="javascript:changeloc(-1)">全部</a>
        <a rel="2" class="sx_child" name="aaa" href="javascript:changeloc('新西兰')">新西兰</a>
        <a rel="3" class="sx_child" name="aaa" href="javascript:changeloc('南非')">南非</a>
    </div>
    <hr class="hr"/>
</div>
<div>
    <div class="container text-center m-t-30">



        <div class="ht-tabs ht-tabs-product text-center">
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="tab-description">
                    <div class="row">
                        <c:forEach items="${page.list}" var="product">
                            <div class="col-sm-6 col-md-4 col-lg-3">
                                <!-- Product item -->
                                <div class="product-item">
                                    <a href="${path}/product/details?id=${product.pid}">
                                        <img src="${path}/images/product/${product.imgUrl}" alt="image">
                                    </a>
                                    <div class="product-caption">
                                        <h4 class="product-name">
                                            <a href="#">${product.pName}</a>
                                        </h4>
                                        <div class="product-price-group">
                                            <span class="product-price">￥${product.price}</span>
                                            <span>${product.standard}</span>
                                        </div>
                                        <div class="ht-btn-group">
                                            <a href="${path}/cart/addtocart?pid=${product.pid}" class="compare_btn">添加到购物车</a>
                                        </div>
                                        <h4></h4>
                                    </div>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--引入导航begin-->
<%@ include file="common/productpages.jsp"%>
<!--引入导航end-->


<%@ include file="common/recent.jsp"%>
<!--引入footer Begin-->
<%@ include file="common/footer.jsp"%>
<!--引入footer  End-->

<!-- jQuery -->
<script src="${path}/js/jquery/jquery-2.2.4.min.js"></script>
<!-- JqueryUI -->
<script src="${path}/js/jquery/jquery-ui.js"></script>
<!-- Bootstrap -->
<script src="${path}/js/bootstrap/bootstrap.min.js"></script>
<!-- Owl-coursel -->
<script src="${path}/js/owl-coursel/owl.carousel.js"></script>
<!-- Magnific-popup -->
<script src="${path}/js/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Script -->
<script src="${path}/js/script.js"></script>

<script src="${path}/js/product.js"></script>
<script type="text/javascript">
    function changerec(num) {
        $("#hrec").val(num);
        sendParam();
    }
    function changecat(num) {
        $("#hcat").val(num);
        sendParam();
    }
    function changeorder(flag) {
        $("#horder").val(flag);
        sendParam();
    }
    function changeloc(obj) {
        $("#hloc").val(obj);
        sendParam();
    }
    $(function () {
        $("a.sx_child").removeClass("sx_selected");
        switch ($("#hrec").val()){
            case "-1":
            $("#rec>a:eq(0)").addClass("sx_selected");
                break;
            case "推荐产品":
                $("#rec>a:eq(1)").addClass("sx_selected");
                break;
            case "新品上市":
                $("#rec>a:eq(2)").addClass("sx_selected");
                break;
            case "热卖产品":
                $("#rec>a:eq(3)").addClass("sx_selected");
                break;
            default:
                break;
        }

        var cati=Number($("#hcat").val());
        if(cati=='-1'){
            $("#cat>a:eq(0)").addClass("sx_selected");
        }else{
            switch (cati){
                case 1:
                    $("#cat>a:eq(1)").addClass("sx_selected");
                    break;
                case 2:
                    $("#cat>a:eq(2)").addClass("sx_selected");
                    break;
                case 3:
                    $("#cat>a:eq(3)").addClass("sx_selected");
                    break;
                case 4:
                    $("#cat>a:eq(4)").addClass("sx_selected");
                    break;
                default:
                    break;
            }
        }

        if ($("#horder").val()=='false'){
            $("#order>a:eq(0)").addClass("sx_selected");
        }else{
            $("#order>a:eq(1)").addClass("sx_selected");
        }


        switch ($("#hloc").val()){
            case "-1":
                $("#loc>a:eq(0)").addClass("sx_selected");
                break;
            case "新西兰":
                $("#loc>a:eq(1)").addClass("sx_selected");
                break;
            case "南非":
                $("#loc>a:eq(2)").addClass("sx_selected");
                break;
            default:
                break;
        }

    })
</script>

</body>
</html>